<!--
 * @Descripttion: 1.tree组件为树形机构  2.tableStyleMixin表格样式混入  3.Pagination分页组件  4.MemberAdd单位成员新增组件  5.
 * @version: 
 * @Author: yuanliutech
 * @Date: 2022-12-06 16:57:41
 * @LastEditors: yuanliutech@lwj
 * @LastEditTime: 2022-12-26 18:28:55
-->
<template>
  <div class="flex-container">
    <div :class="[!isZoom ? 'left' : 'left left1']">
      <div class="list">
        <Tree ref="refTree" @toggleOrgId="toggleOrgId" :dataList='dataList'></Tree>
      </div>
      <!-- <div class="zoom" @click="zoomClick">点击缩放</div> -->
    </div>
    <div :class="[!isZoom ? 'right' : 'right right1']">
      <div class="header">
        <div class="header_left">
          <div class="org_name">{{ orgName }}</div>

          <div class="total"><i class="iconfont yonghu"></i>{{ total }}</div>
        </div>
        <div class="header_right" style="display: flex;align-items: center;">
          <el-select size="small" v-model="searchSel" slot="prepend" placeholder="请选择" class="el_Select">
            <el-option label="用户名" value="1"></el-option>
            <el-option label="手机号" value="2"></el-option>
          </el-select>
          <el-input :placeholder="searchSel == 1 ? '请输入完整的用户名' : '请输入完整的手机号'" v-model="searchVal"
            style="width: 220px;margin-right: 15px;" size="small" maxlength="20" clearable @clear="searchClick"
            class="el_input">
            <el-button slot="append" :icon="loadingSearch ? 'el-icon-loading' : 'el-icon-search'" @click="searchClick">
            </el-button>
          </el-input>

          <!-- v-if="flag || user.roleName=='TENANT_ADMIN'" -->
          <el-button class="el_button" size="small" icon="el-icon-plus" style="margin-left: 15px" @click="addClick"
            v-if="role == 1 || user.roleName == 'TENANT_ADMIN'">
            关联成员
          </el-button>
          <!-- v-if="user.roleName=='ORG_ADMIN' && !flag" -->
          <el-button class="el_button" size="small" icon="el-icon-right" style="margin-left: 15px" @click="exit"
            v-if="role != 1 && user.roleName == 'ORG_ADMIN'">
            退出机构
          </el-button>
        </div>
      </div>
      <div class="content">
        <el-table :data="dataList" height="calc(100% - 65px)" class="table" :header-cell-style="headerStyle">
          <el-table-column align="center" label="序号" type="index" width="80" height="30"></el-table-column>
          <el-table-column align="center" prop="username" label="用户名" min-width="140" show-overflow-tooltip>
          </el-table-column>
          <el-table-column align="center" prop="mobile" label="手机号" min-width="150" show-overflow-tooltip>
          </el-table-column>
          <el-table-column align="center" prop="role" label="岗位" min-width="150" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.role == 1">管理员</span>
              <span v-if="scope.row.role == 2">消防安全专员</span>
              <span v-if="scope.row.role == 3">消防安全负责人</span>
              <span v-if="scope.row.role == 4">消防监管人</span>
              <span v-if="scope.row.role == 5">专职消防安全管理人 </span>
              <span v-if="scope.row.role == 6">楼(建筑)长</span>
              <span v-if="scope.row.role == 7">维保人员</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="100">
            <template slot-scope="scope">
              <!-- v-if="(flag && user.userId!=scope.row.userId)|| user.roleName=='TENANT_ADMIN'" -->
              <el-tooltip class="item" effect="dark" content="设置岗位" placement="bottom"
                v-if="(role == 1 && user.userId != scope.row.userId) || (user.roleName == 'TENANT_ADMIN' && scope.row.role != 1)">
                <i @click="edit(scope.row)" class="iconfont guanliyuan tableBtnIcon"></i>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="移除" placement="bottom"
                v-if="(role == 1 && user.userId != scope.row.userId) || (user.roleName == 'TENANT_ADMIN' && scope.row.role != 1)">
                <i @click="delClick(scope.row.id)" class="iconfont anquantuichu tableBtnIcon"></i>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <pagination :page.sync="page" :limit.sync="limit" :total="total" @pagination="getDataList" class="pagination">
        </pagination>
      </div>
    </div>
    <member-add ref="refMemberAdd" :orgId="orgId" :width="width"></member-add>
    <editturnOver ref="refeditturnOver" :editInfo="editInfo" :orgId="orgId"></editturnOver>
  </div>
</template>

<script>
import {
  reqOrgUserList,
  reqOrgUserDel,
  reqTurnOver,
  reqOrgExit,
} from "@api/api.js";
import Tree from "./components/Unit";
import tableStyleMixin from "@mixin/table-style";
import Pagination from "@components/Pagination.vue";
import MemberAdd from "./components/MemberAdd.vue";
import editturnOver from "./components/editturnOver.vue";
import { mapState } from "vuex";

export default {
  name: "",
  components: {
    Tree,
    Pagination,
    MemberAdd,
    editturnOver
  },
  mixins: [tableStyleMixin],
  data() {
    return {
      searchVal: "",
      searchSel: "1", //用户名/手机号
      dataList: [],
      page: 1,
      limit: 10,
      total: 0,
      loadingSearch: false,
      isZoom: false,
      orgId: "",
      orgName: "",
      flag: false,
      role: "",
      width: "",
      editInfo: {}
    };
  },
  mounted() {
    // console.log(this.user);
    // let element = this.$el.querySelector('.header')
    // let width = element.offsetWidth
    // // console.log(width);
    // this.width=width
    // // 动态设置样式
    // if(width>520){
    //   this.$el.querySelector('.el-input-group__prepend').style.cssText =
    //             'border-left: none !important;border-top: none !important;border-bottom: none !important;';
    // }else{
    //   this.$el.querySelector('.el-input-group__prepend').style.cssText =
    //             'border-left: none !important;border-bottom: none !important;';
    // }
  },
  watch: {
  },
  computed: {
    ...mapState(["user"]),
  },
  methods: {
    // 删除单位
    exit(data) {
      this.$confirm("此操作将退出该机构 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await reqOrgExit({
            orgId: this.orgId,
            userId: this.user.userId,
          });
          if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
          this.$modal.notifySuccess("退出机构成功!");
          this.$refs.refTree.getDataList()
        })
        .catch(() => { });
    },
    // 设置单位管理员
    edit(row) {
      this.editInfo = JSON.parse(JSON.stringify(row))
      this.$refs.refeditturnOver.dialogVisible = true;
      // this.$confirm("此操作将设置该用户为单位管理员, 是否继续?", "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning",
      // })
      //   .then(async () => {
      //     const res = await reqTurnOver({
      //       orgId: this.orgId,
      //       userId: row.userId,
      //       role:1
      //     });
      //     if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      //     this.$modal.notifySuccess("设置成功！");
      //     if(this.user.roleName=='ORG_ADMIN'){
      //       this.role ='2' // 如果是单位管理员，把单位设置给其他成员
      //       // 单位列表管理员图标隐藏
      //       this.$refs.refTree.flagtree=false;
      //     }
      //      this.getInitDataList()
      //   })
      //   .catch(() => {});
    },
    //   点击缩放左侧
    zoomClick() {
      this.isZoom = !this.isZoom;
    },
    // 切换单位
    toggleOrgId(data) {
      // console.log(data);
      if (data.orgId == "") {
        this.dataList = [];
        this.total = 0;
        return;
      }
      this.orgId = data.orgId;
      this.orgName = data.orgName;
      this.role = data.role; //role==1为管理员
      this.getDataList();
    },
    async getDataList() {
      let { orgId, searchSel, username, mobile, searchVal } = this;
      if (searchSel == 1) {
        username = searchVal;
        mobile = "";
      } else {
        mobile = searchVal;
        username = "";
      }
      const res = await reqOrgUserList(this.page, this.limit, {
        orgId,
        username,
        mobile,
        userId: this.user.userId,
        roleName: this.user.roleName,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.dataList = res.data.rows;
      // this.flag=false;
      // this.dataList.forEach(res=>{
      //   // console.log(res);
      //   // console.log(this.role);
      //   // console.log(res.userId);
      //   // console.log(this.user.userId);
      //   if(this.role==1 && res.userId==this.user.userId){
      //     // console.log("管理员");
      //     this.flag=true;
      //   }
      // })
      this.total = res.data.total;
    },
    getInitDataList() {
      this.page = 1;
      this.limit = 10;
      this.getDataList();
    },
    editState() {
      this.role = '2' // 如果是普通管理员，把单位设置给其他成员
      // 单位列表管理员图标隐藏
      this.$refs.refTree.flagtree = false;
    },
    // 查询
    async searchClick() {
      this.page = 1;
      this.limit = 10;
      this.loadingSearch = true;
      await this.getDataList();
      this.loadingSearch = false;
    },
    // 点击关联成员
    addClick() {
      this.$refs.refMemberAdd.dialogVisible = true;
    },
    delClick(id) {
      this.$confirm("此操作将移除该成员, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await reqOrgUserDel({ idList: [id] });
          if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
          this.$modal.notifySuccess("移除成功");
          this.getInitDataList();
        })
        .catch(() => { });
    },
  },
};
</script>

<style scoped lang="less">
@import url("~@views/org/orgList.less");
@import url("~@views/style/tablePage.less");

// 查询条件切换
::v-deep .el-select .el-input {
  width: 100px;
}

// 查询条件切换
// ::v-deep .el-input-group__prepend {
//   //  border-left: none !important;
//   // border-top: none !important;
//   // border-bottom: none !important;
//   // border-right: none !important;
// }

// 搜索框
::v-deep .el_input .el-input__inner {
  border-left: none !important;
  border-radius: 0px !important;
}

::v-deep .el_Select .el-input__inner {
  border-radius: 0px !important;
}</style>
